<template>
  <div class="app-container">


    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="serviceTypeName" label="服务类型">
      </el-table-column>

      <el-table-column label="工厂名称" prop="factoryName">
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.rowNum }} - {{ scope.row.colNum }}</span>
        </template> -->
      </el-table-column>


      <el-table-column prop="coveringBrand" label="覆盖品牌"> </el-table-column>
<!--
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">上架</el-tag>
          <el-tag v-if="scope.row.status == 2" type="danger">下架</el-tag>
        </template>
      </el-table-column> -->

      <el-table-column prop="coveringArea" label="覆盖区域"> </el-table-column>

      <el-table-column  label="配置品牌/覆盖范围">
        <template slot-scope="scope">
           <a  size="mini" style="color: blue;"  @click="submitConfig(scope.row)">配置</a>

        </template>

      </el-table-column>

    </el-table>

    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getListData"
    />

 <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="top">
        <el-row>
             <el-col :span="12">
              <el-form-item label="请选择覆盖品牌" prop="factoryName">
                <!-- <el-select v-model="factoryIdList" multiple placeholder="请选择">
                        <el-option
                          v-for="item in factoryList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select> -->
                  <el-select v-model="form.brandIdList" filterable multiple   placeholder="请选择">
                        <el-option
                          v-for="item in brandList"
                          :key="item.id"
                          :label="item.brandName"
                          :value="item.id">
                        </el-option>
                      </el-select>
               </el-form-item>
             </el-col>

             <el-col :span="12">

          <el-form-item label="配置工厂范围" prop="factoryName" style="height: 50vh; overflow: auto;">


            <el-tree
              :data="provinceAndCityData"
               show-checkbox
               ref="tree"
               node-key="value"
               highlight-current
              :default-expanded-keys="choosedCity"
              :default-checked-keys="choosedCity"
              :props="defaultProps">
            </el-tree>


           </el-form-item>

             </el-col>

        </el-row>



      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm"  :loading="subMitLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
        <!-- <el-button type="primary" @click="choseNode">获取选中的节点</el-button> -->
      </div>
 </el-dialog>


  </div>
</template>

<script>
import { listBrand } from '@/api/brand/index'
import { dispatch,listFactory ,getFactoryDispatchConfig}  from '@/api/factory/index'
import {
  getShoeRackList,
  addOrEditShoeRack,
  deleteShoeRack,
} from "@/api/shoeRack/index";
import { provinceAndCityData  } from "element-china-area-data";
export default {
  name: "Index",
  data() {
    return {
      defaultProps: {
          children: 'children',
          label: 'label',
          value:'value'
        },
      provinceAndCityData,
      subMitLoading:false,
      //被用户选中的集合
      provinceAndCityDataSelectedList:[
          //  {
          //   code:"1001",
          //   province:"四川省",
          //   city:"成都市"
          //  }

      ],
      open:false,
      title:"修改工厂配置",
      brandList:[],
      form:{},
      rules:{},
      factory:{},
      factoryIdList:null,
      configRecordList:[{

            // brandId:"",
            // records:[]


      }],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      choosedCity:[],
      list: []

    };
  },

  created() {
  //  console.info(this.provinceAndCityData)
    listBrand({}).then(res=>{
      this.brandList=res.data.records
    })
    this.getListData({
      page: 1,
      limit: 10,
    });
  },
  methods: {


    submitForm(){

     let nodeList= this.$refs.tree.getCheckedKeys();
     if(nodeList.length==0){
        this.$message.error("请选择至少一个地域范围");
        return
     }

     if(this.form.brandIdList.length==0){
        this.$message.error("请选择至少一个品牌");
        return
     }

     if(nodeList){

      this.provinceAndCityDataSelectedList=[]
      nodeList.forEach(res=>{
            this.getAreaByCode(res)
      })
       this.configRecordList=[]
       this.form.brandIdList.forEach((res)=>{
            this.configRecordList.push({
              brandId:res,
              records:this.provinceAndCityDataSelectedList
            })
     })
     this.subMitLoading=true
      let data={factoryId:this.factory.id,data:this.configRecordList}
      dispatch(data).then(res=>{
         this.$message({
        message: '操作成功',
        type: 'success'
      })
        this.$refs.tree.setCheckedKeys([]);
      this.subMitLoading=false
      this.open=false
        this.getListData({
            page: 1,
            limit: 10,
          });
      })

     }



    },

    cancel(){
      this.open=false
    },


  //根据city获取
  getAreaByCode(code){

      //最后都是以市的形式展示出来
      if(code.length<=2){
        //一级类目，不用查找
        return
      }
      //查找市并向上找到省，两个for循环找到
       this.provinceAndCityData.forEach(resProvince => {
              let cityList=resProvince.children
              cityList.forEach((resCity)=>{
                   if(resCity.value==code){
                        //  {
                    //       code:"1001",
                    //       province:"四川省",
                    //       city:"成都市"
                    //      }
                       this.provinceAndCityDataSelectedList.push({code,provinces:resProvince.label,city:resCity.label})
                       return
                   }
              })
      });




  },


    getListData({ page, limit }) {
      listFactory(
        // this.queryParams,
        {status:"NORMAL",... this.queryParams}
        // page || this.queryParams.page + 1,
        // limit
      ).then(({ data }) => {
        // console.info(data.rows)
        this.list = data.records;
        this.queryParams.total = data.total;
        this.queryParams.page = data.current;
        this.queryParams.limit = data.size;
      });
    },

   submitConfig(item){

     getFactoryDispatchConfig({factoryId:item.id}).then(res=>{
       this.form.brandIdList=[]
       this.factory=item
       this.choosedCity=[]
       this.form.brandIdList=res.data.brandIdList
       this.choosedCity=res.data.codeList
       if(this.$refs.tree){
         this.$refs.tree.setCheckedKeys([]);
       }

     })

     this.open=true

   },

   checkBoxFn(e){
    //  console.info("节点选中了")
   },

    updateStatus(item, status) {
      addOrEditShoeRack({
        ...item,
        status,
      }).then((res) => {
        this.loading = false;
        this.$message.success("操作成功");
        this.getListData(this.queryParams);
      });
    },
    deleteItem(id) {
      deleteShoeRack(id).then((res) => {
        this.$message.success("删除成功");
        this.getListData(this.queryParams);
      });
    },
    create() {
      this.$router.push({ path: "/shoeRack/edit" });
    },
    edit(id) {
      // console.log(id, "zxcasd");
      this.$router.push({ path: `/shoeRack/edit?id=${id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  margin-bottom: 20px;
}
a:hover{
  cursor: pointer;
}
</style>
